<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
        <title>11. 盛最多水的容器</title>
    </head>
    <body>
        <section>
            <div>给你 n 个非负整数 a1，a2，...，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。
            </div>
            <div>说明：你不能倾斜容器。</div>
            <div>示例 1：</div>



            <div>输入：[1,8,6,2,5,4,8,3,7]</div>
            <div>输出：49 </div>
            <img src="./数组中问题/11.png">
            <div>解释：图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下，容器能够容纳水（表示为蓝色部分）的最大值为 49。
            </div>
        </section>
        <h1>方法一（对撞指针）</h1>
        <pre class="language-JavaScript">
            <code>
                var maxArea = function(height) {
                    let l = 0, r = height.length - 1;
                    let maxArea = 0;
                    while(l < r) {
                        maxArea = Math.max(maxArea, (r - l) * Math.min(height[l], height[r]));
                        if(height[l] > height[r]) {
                            r --;
                        } else {
                            l ++;
                        }
                    }
                    return maxArea;
                };
            </code>
        </pre>
        <script>
            var maxArea = function(height) {
                let l = 0, r = height.length - 1;
                let maxArea = 0;
                while(l < r) {
                    maxArea = Math.max(maxArea, (r - l) * Math.min(height[l], height[r]));
                    if(height[l] > height[r]) {
                        r --;
                    } else {
                        l ++;
                    }
                }
                return maxArea;
            };
        </script>
    </body>
</html>